<template>
  <div class="comment" :data-quoteid="comment.quoteId" :data-cid="comment.cid">
    <div  v-show="comment.quoteId!=quoteMap['final'+currentId]">
      <comment :comment="quote" :list="list" :currentId="currentId" :quoteMap="quoteMap" v-if="comment.quoteId>0" ></comment>
    </div>
    <p class="collapse"  v-if="comment.quoteId>0"  v-show="comment.quoteId==quoteMap['final'+currentId]"  @click="showCollapse">[重复引用已隐藏]</p>
    <div class="comment-text" v-html="comment.content"></div>
    <a class="username" :href="`http://m.acfun.cn/details?upid=${comment.userID}`">#{{comment.count}} {{comment.userName}} </a>
  </div>
</template>

<script>
  import comment from  './comment.vue'
  export default {
    name: 'comment',
    props: ['comment','list','quoteMap','currentId'],
    computed:{
      quote(){
        return this.list['c'+this.comment.quoteId];
      }
    },
    methods:{
      showCollapse(e){
        const ele = e.target;
        const bool = ele.innerHTML.indexOf('隐藏')>=0;
        const comments = ele.previousElementSibling;
        if(bool){
          ele.innerHTML = ele.innerHTML.replace('隐藏','显示')
          comments.style.display = 'block'
        }else {
          ele.innerHTML = ele.innerHTML.replace('显示','隐藏')
          comments.style.display = 'none'
        }
      },
    }
  }
</script>
<style >
  .username{
    color: #888;
    padding: 6px;
  }
  img{
    vertical-align: baseline;
  }
  .comment{
    border: 1px solid #ccc;
    font-size: 12px;
    text-align: left;
    padding: 2px 1px 0;
  }
  .comment-text{
    padding: 6px;
    color: #666;
    word-break: break-all;
  }
  .collapse{
    text-align: center;
    padding: 5px 0;
    border: thin solid #ccc;
    margin: 0;
  }
</style>
